<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <title>个人中心</title>
	    <!-- 引入layui css文件 -->
	    <link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
	    <!-- 自定义 css -->
	    <link rel="stylesheet" href="css/index.css">
		<script src="./js/vue.js"></script>
	</head>
	<body>
	<!-- Header -->
	<div class="header">
        <!-- 个性化标题 -->
        <div class="mytitle">
            <label>母婴护理知识共享平台</label>
        </div>
        <!-- 导航栏 -->
        <div class="mymenu-content">
            <ul class="mymenu">
                <li><a href="index.html">首页</a></li>
                <li><a href="message.html">寄语</a></li>
                <li><a href="photos.html">宝贝墙</a></li>
                <li><a href="about.html">营养推荐</a></li>
                <li><a href="aihao.html">疾病预防</a></li>
                <li><a href="">个人中心</a></li>
            </ul>
        </div>
        <!-- 隐藏功能 -->
        <div class="other-functions">
            <a href="login.html">登录</a>
            <label>/</label>
            <a href="register.html">注册</a>
        </div>
        <!-- 搜索框 -->
        <div class="query">
            <input class="keyword" placeholder="搜索内容"/>
            <i class="layui-icon" style="margin-right: 20px; font-size: 18px;">&#xe615;</i>
        </div>
    </div>
    <!-- 个性签名 -->
    <div class="my-sign">
        <!--  包含标志和签名 -->
        <div class="my-signImg">
            <img id="my-signImg" src="img/my-sign.gif">
            <div class="my-signWord">
                <span class="my-signTitle" id="my-signTitle">匆匆时光</span>
                <span class="my-signBody" id="my-signBody">I' am waiting for you here.</span>
            </div>
        </div>
    </div>
    <!-- Content -->
    <div class="main-content">
	    <!-- 个人以及所有文章、留言、照片汇总 包含大分类以及小标签 左面版 -->
	    <div class="my-totalContent">
	        <!-- 1.个人以及汇总部分 -->
	        <div class="blog-inTotal">
	            <!-- 头像 -->
	            <img src="img/IMG_1568.PNG">
	            <!-- 说明 -->
	            <span>——好好学习，天天向上吧</span>
	            <!-- 各方面汇总(各项目以及数量) -->
	            <fieldset class="layui-elem-field">
	                <legend>文章标签</legend>
	                <!-- 用于存放tags -->
	                <div class="layui-field-box" id="tagContent">
						<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px;font-weight: 400;">论语</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">道德经</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">余华作品</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">沈从文</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">冰心选集</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">小说散文</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">随笔</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">外国文学</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">人生感悟</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">遇见你</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">日记</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">绘画</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗经</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗词研究</span>
		                <span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">历代书法</span>
		            
	                </div>
	            </fieldset>
	        </div>
	    </div>
        <!-- 主体显示部分 右面板 -->
        <div class="content-body">
            <!-- 爱好面板 -->
            <!-- Content -->
			<div id="app" class="main-content blog-item">
				<!-- 个人中心 -->
				<div class="profile">
					<img :src="user.avatar" alt="Avatar" style="width: 10em;">
					<h2>{{ user.name }}</h2>
				</div>
				<hr>
				<!-- 文章列表 -->
				<div class="article-list">
					<div class="article" v-for="article in articles" :key="article.id">
						<h3>{{ article.title }}</h3>
						<p>{{ article.content }}</p>
						<hr>
					</div>
				</div>
			</div>
        </div>
        <hr class="my-line">
    </div>
    <script src="layui-v2.2.3/layui/layui.js"></script>
    <!-- 引入jquery js -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 自定义 js -->
    <script src="js/index.js"></script>
    <script>
        $(function () {
            //init
            component.init();
        });
    </script>
	</body>
	<script>
        new Vue({
            el: "#app",
            data: {
                user: {
                    name: "John Doe",
                    avatar: "img/my-sign.gif"
                },
                articles: [
                    { id: 1, title: "文章标题1", content: "文章内容1" },
                    { id: 2, title: "文章标题2", content: "文章内容2" },
                    { id: 3, title: "文章标题3", content: "文章内容3" }
                ]
            }
        });
    </script>
</html>



